import type { SogouElements } from '../../../../../../../../types/constants/personalization/sogou'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'

export class SogouIndexSearchPage {
  elements: SogouElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO_GOU]
  private static instance: SogouIndexSearchPage
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SogouIndexSearchPage {
    if (!SogouIndexSearchPage.instance) {
      SogouIndexSearchPage.instance = new SogouIndexSearchPage()
    }
    return SogouIndexSearchPage.instance
  }

  init(): void {
  }

  getMainStyles(): string {
    return `
  /* 隐藏样式 */    
  #wrap .header:has(${generateHideSelector('.top-nav')}):has(${generateHideSelector('.user-box')}) {
    background-color: transparent !important;
  }
  #wrap .header:has(${generateHideSelector('.user-box')}) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* 主样式 */
  #wrap {
    /* 顶部菜单*/
    .header {
      background-color: var(${this.themeVarService.search.header.background}) !important;

      .top-nav {
        li {
          &.cur {
            span {
              color: var(${this.themeVarService.tab.textActive}) !important;
              border-bottom: 2px solid var(${this.themeVarService.tab.textActive}) !important;
            }
          }

          > a {
            color: var(${this.themeVarService.search.default.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
        }
      }
      
      .user-box {
        .local-weather {
          span {
            color: var(${this.themeVarService.search.default.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
        }
        
        #cniil_wza {
          color: var(${this.themeVarService.search.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.text}) !important;
          }
        }
      }
    }
    
    #content {
      #search-box {
        .sbox-history-container, .sbox-sugg-container {
          font-size: ${this.themeVarService.search.default.fontSize} !important;
        }
        
        .sbox-history-container {
          color: var(${this.themeVarService.search.history.text}) !important;
        }
        
        .sbox-sugg-container {
          color: var(${this.themeVarService.search.suggestions.text}) !important;
          
          .sbox-sugg-wrap {
            .sbox-sugg-item {
              color: var(${this.themeVarService.search.suggestions.text}) !important;
              
              &:hover {
                color: var(${this.themeVarService.link.default.text}) !important;
              }
            }
          }
        }
      }
    }
    
    /* 页脚 */
    #QRcode-footer {
      .ft-info {
        color: var(${this.themeVarService.search.default.text}) !important;

        span {
          color: var(${this.themeVarService.search.default.text}) !important;
        }
        
        a {
          color: var(${this.themeVarService.link.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.textHover}) !important;
            text-decoration: none !important;
          }
        }
      }
    }
  }  
    `
  }
}
